Today, we are going to create a table in reactjs. 

Start with, importing the DataTable.

Inside the div, we will take “DATATABLE”. Take two property columns and data.

<div className="App">

      <DataTable

            columns={columns}

            data={data}

            pagination

        />

    </div>

Define the property "Columns." We will take two columns. Set the names “Title” and “Year” and set the selector with row.title and row.year. The data in the title and year will be shown in the columns.

const columns = [

  {

      name: 'Title',

      selector: row => row.title,

      sortable : true

  },

  {

      name: 'Year',

      selector: row => row.year,

      sortable : true

  },

];

We will define the data with the properties “id”, “title” and “year”. This data will be set into the selector of columns.

const data = [

  {

      id: 1,

      title: 'Anand',

      year: '1995',

  },

  {

      id: 2,

      title: 'Balaji',

      year: '1992',

  },

];

Our complete code will look like this

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

import DataTable from 'react-data-table-component';

const columns = [

  {

      name: 'Title',

      selector: row => row.title,

      sortable : true

  },

  {

      name: 'Year',

      selector: row => row.year,

      sortable : true

  },

];

const data = [

  {

      id: 1,

      title: 'Anand',

      year: '1995',

  },

  {

      id: 2,

      title: 'Balaji',

      year: '1992',

  },

];

function App() {

  return (

    <div className="App">

      <DataTable

            columns={columns}

            data={data}

            pagination

        />

    </div>

  )

}

export default App

Output: 

The output will be: